import React from 'react';
import { Card, Col, Row } from 'antd';
import Map from './components/map';
import Bar from './components/bar';
import Line from './components/line';
import Pie from './components/pie';
import 'echarts/extension/bmap/bmap'
import BaseComponent from '../../components/Base/BaseComponent';
import { datehelper } from '../../utils/help';
import { axhttp } from '../../utils/axhttp';

const url = {
    read: '/api/user/readx',
}
export default class Index extends BaseComponent {
    state = {
        data: [
            { name: '星期一', value: 201 },
            { name: '星期二', value: 202 },
            { name: '星期三', value: 203 },
            { name: '星期四', value: 204 },
            { name: '星期五', value: 205 },
            { name: '星期六', value: 206 },
            { name: '星期日', value: 207 },
        ],
    }

    componentWillMount() {
        this.handleReadUser();
    }

    handleReadUser = () => {
        axhttp.getXhr(url.read).then(res => {
            const d = datehelper.getLastWeek();
            res.data.list.forEach(i => {
                const weekDateName = datehelper.getWeekDate(i.createTime);
                const f = d.find(j => j.name === weekDateName);
                if (f) {
                    f.value = f.value + 1;
                }
            });

            this.setState({
                data: d,
            });
        });
    }

    render() {
        const { data } = this.state;

        return (
            <div>
                <Row gutter={8}>
                    <Col xl={3}>
                        <Card
                            style={{ marginBottom: 16 }}
                            title="新增用户数量"
                            bordered={false}
                            bodyStyle={{ padding: 0 }}
                        >
                            <div style={{ padding: '0 24px' }}>
                                <br />
                                {data.map(i => (
                                    <p>
                                        {i.name}：<span>{i.value}</span> 人
                                    </p>
                                ))}
                            </div>
                        </Card>
                    </Col>
                    <Col xl={15}>
                        <Card
                            style={{ marginBottom: 16 }}
                            title="已开通共享单车的城市分布"
                            bordered={false}
                            bodyStyle={{ padding: 0 }}
                        >
                            <Map />
                            {/* <div id='main-x' style={{ height: 400 }}></div> */}
                        </Card>
                    </Col>
                    <Col xl={6}>
                        <Card
                            style={{ marginBottom: 16 }}
                            title="开始行程的时段统计"
                            bordered={false}
                            bodyStyle={{ padding: 0 }}
                        >
                            <Pie />
                        </Card>
                    </Col>
                </Row>
                <Row gutter={8}>
                    <Col xl={12}>
                        <Card
                            style={{ marginBottom: 16 }}
                            title="订单量统计"
                            bordered={false}
                            bodyStyle={{ padding: 0 }}
                        >
                            <Bar />
                        </Card>
                    </Col>
                    <Col xl={12}>
                        <Card
                            style={{ marginBottom: 16 }}
                            title="订单金额统计"
                            bordered={false}
                            bodyStyle={{ padding: 0 }}
                        >
                            <Line />
                        </Card>
                    </Col>
                </Row>
            </div>
        );
    }
}
